<template>
  <div style="padding: 20px">
    <div class="hipt-row hipt-brt hipt-brl hipt-mt-5">
      <div class="hipt-col-6">
        <div class="hipt-row">
          <div class="hipt-col-12">
            <span class="hipt-desc hipt-height-20">合同号</span>
          </div>
          <div class="hipt-col-12">
            <span class="hipt-desc hipt-height-20"></span>
          </div>
        </div>
        <div class="hipt-row">
          <div class="hipt-col-12">
            <span class="hipt-desc hipt-height-20">运输方式</span>
          </div>
          <div class="hipt-col-12">
            <span class="hipt-desc hipt-height-20"></span>
          </div>
        </div>
        <div class="hipt-row">
          <div class="hipt-col-12">
            <span class="hipt-desc hipt-height-20">清算卡号</span>
          </div>
          <div class="hipt-col-12">
            <span class="hipt-desc hipt-height-20"></span>
          </div>
        </div>
        <div class="hipt-row">
          <div class="hipt-col-12">
            <span class="hipt-desc hipt-height-20">付款金额</span>
          </div>
          <div class="hipt-col-12">
            <span class="hipt-desc hipt-height-20"></span>
          </div>
        </div>
        <div class="hipt-row">
          <div class="hipt-col-12">
            <span class="hipt-desc hipt-height-20">签付日期</span>
          </div>
          <div class="hipt-col-12">
            <span class="hipt-desc hipt-height-20"></span>
          </div>
        </div>
        <div class="hipt-row">
          <div class="hipt-col-12">
            <span class="hipt-desc hipt-height-20">技术条件</span>
          </div>
          <div class="hipt-col-12">
            <span class="hipt-desc hipt-height-20"></span>
          </div>
        </div>
        <div class="hipt-row">
          <div class="hipt-col-12">
            <span class="hipt-desc hipt-height-20">炉批号</span>
          </div>
          <div class="hipt-col-12">
            <span class="hipt-desc hipt-height-20"></span>
          </div>
        </div>
      </div>
      <div class="hipt-col-18">
        <div class="hipt-row">
          <div class="hipt-col-4 hipt-content">
            <span class="title hipt-height-20">x制对象</span>
            <span class="info hipt-height-30"></span>
          </div>
          <div class="hipt-col-4 hipt-content">
            <span class="title hipt-height-20">产品图号</span>
            <span class="info hipt-height-30"></span>
          </div>
          <div class="hipt-col-4 hipt-content">
            <span class="title hipt-height-20">名称</span>
            <span class="info hipt-height-30"></span>
          </div>
          <div class="hipt-col-4 hipt-content">
            <span class="title hipt-height-20">材料牌号</span>
            <span class="info hipt-height-30"></span>
          </div>
          <div class="hipt-col-4 hipt-content">
            <span class="title hipt-height-20">规格</span>
            <span class="info hipt-height-30"></span>
          </div>
          <div class="hipt-col-4 hipt-content">
            <span class="title hipt-height-20">状态</span>
            <span class="info hipt-height-30"></span>
          </div>
        </div>
        <div class="hipt-row">
          <div class="hipt-col-2 hipt-content">
            <span class="title hipt-height-20">单位</span>
            <span class="info hipt-height-30"></span>
          </div>
          <div class="hipt-col-6 hipt-content">
            <span class="title hipt-height-20">到场数量</span>
            <span class="info hipt-height-30"></span>
          </div>
          <div class="hipt-col-6 hipt-content">
            <span class="title hipt-height-20">实收款</span>
            <span class="info hipt-height-30"></span>
          </div>
          <div class="hipt-col-4 hipt-content">
            <span class="title hipt-height-20">单价</span>
            <span class="info hipt-height-30"></span>
          </div>
          <div class="hipt-col-6 hipt-content">
            <span class="title hipt-height-20">总金额</span>
            <span class="info hipt-height-30"></span>
          </div>
        </div>
        <div class="hipt-row">
          <div class="hipt-col-4 hipt-content">
            <span class="title hipt-height-20">化验编号</span>
            <span class="info hipt-height-30"></span>
          </div>
          <div class="hipt-col-20 hipt-content">
            <span class="note">备注：</span>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="hipt-row">
      <div class="hipt-col-6">
        <span class="title">序号：</span>
        <span class="info"></span>
      </div>
      <div class="hipt-col-6">
        <span class="title">货品：</span>
        <span class="info"></span>
      </div>
    </div> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      row: {
        Sequence: 1,
        WaresID: 111
      },
      message: 'Hello Element Plus'
    }
  },
  methods: {
    //明细表：单元格渲染函数
    // function(value,row,index,options){
    //     let rowTemplate = '';
    //     rowTemplate += `
    //         <div class='hipt-row hipt-mt-5'>
    //             <div class='hipt-col-6 hipt-mb-5'>
    //                 <span class='title'>序号：</span>
    //                 <span class='info'>${row.Sequence}</span>
    //             </div>
    //             <div class='hipt-col-6 hipt-mb-5'>
    //                 <span class='title'>货品：</span>
    //                 <span class='info'>${row.WaresID}</span>
    //             </div>
    //             <div class='hipt-col-6 hipt-mb-5'>
    //                 <span class='title'>数量：</span>
    //                 <span class='info'>${row.Qty}</span>
    //             </div>
    //             <div class='hipt-col-6 hipt-mb-5'>
    //                 <span class='title'>单位：</span>
    //                 <span class='info'>${row.Unit}</span>
    //             </div>
    //             <div class='hipt-col-6 hipt-mb-5'>
    //                 <span class='title'>货品状态：</span>
    //                 <span class='info'>${row.WaresStatusID}</span>
    //             </div>
    //             <div class='hipt-col-6 hipt-mb-5'>
    //                 <span class='title'>生产厂家：</span>
    //                 <span class='info'>${row.Manufacturer}</span>
    //             </div>
    //             <div class='hipt-col-6'>
    //                 <span class='title'>品牌：</span>
    //                 <span class='info'>${row.Brand}</span>
    //             </div>
    //             `;
    //             rowTemplate += `</div>`;
    //             return rowTemplate;
    // }
    // function(value,row,index,options){
    //     let rowTemplate = '';
    //     rowTemplate += `
    //         <div class='custom-container'>
    //             <div class='mg-row col-25'>
    //                 <span class='title'>序号：</span>
    //                 <span class='info'>${row.Sequence}</span>
    //             </div>
    //             <div class='mg-row col-75'>
    //                 <span class='title'>货品：</span>
    //                 <span class='info'>${row.WaresID}</span>
    //             </div>
    //             <div class='mg-row col-25'>
    //                 <span class='title'>数量：</span>
    //                 <span class='info'>${row.Qty}</span>
    //             </div>
    //             <div class='mg-row col-25'>
    //                 <span class='title'>单位：</span>
    //                 <span class='info'>${row.Unit}</span>
    //             </div>
    //             `;
    //             rowTemplate += `</div>`;
    //             return rowTemplate;
    // }
  }
}
</script>
<style lang="scss" scoped>
.hipt-mt-5 {
  margin-top: 5pt;
}
.hipt-mb-5 {
  margin-bottom: 5pt;
}
.hipt-tleft {
  text-align: center;
}
.hipt-tcenter {
  text-align: center;
}
.hipt-tright {
  text-align: center;
}
.hipt-brt {
  border-top: 1px solid #000;
}
.hipt-brl {
  border-left: 1px solid #000;
}
.hipt-height-20 {
  height: 25pt;
  line-height: 25pt;
}
.hipt-height-30 {
  height: 33.3pt;
  line-height: 33.3pt;
}
.hipt-desc {
  display: block;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  text-align: center;
}
.hipt-row {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  box-sizing: border-box;
  /* border: 1px solid #c8c9cc; */
  /* padding: 5pt; */
  min-width: 0;
}
.hipt-row .hipt-col-2 {
  display: block;
  flex: 0 0 8.333333333333332%;
  max-width: 8.333333333333332%;
}
.hipt-row .hipt-col-3 {
  display: block;
  flex: 0 0 12.5%;
  max-width: 12.5%;
}
.hipt-row .hipt-col-4 {
  display: block;
  flex: 0 0 16.666666666666664%;
  max-width: 16.666666666666664%;
}
.hipt-row .hipt-col-6 {
  display: block;
  flex: 0 0 25%;
  max-width: 25%;
}
.hipt-row .hipt-col-8 {
  display: block;
  flex: 0 0 33.33333333333333%;
  max-width: 33.33333333333333%;
}
.hipt-row .hipt-col-12 {
  display: block;
  flex: 0 0 50%;
  max-width: 50%;
}
.hipt-row .hipt-col-18 {
  display: block;
  flex: 0 0 75%;
  max-width: 75%;
}
.hipt-row .hipt-col-20 {
  display: block;
  flex: 0 0 83.333333333333332%;
  max-width: 83.333333333333332%;
}
.hipt-content {
  text-align: center;
}
.hipt-content .title {
  display: block;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  width: 100%;
}
.hipt-content .info {
  display: block;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  width: 100%;
}
.hipt-content .note {
  display: block;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  width: 100%;
  height: 100%;
  text-align: left;
}
</style>